<template>
  <div ref="dom" class="charts chart-bar"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartBar',
  props: {
    value: Object,
    text: String,
    subtext: String
  },
  data () {
    return {
      dom: null
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
  mounted () {
    const colorList = ['#47A2FF ', '#53C8D1', '#59CB74', '#FBD444', '#7F6AAD', '#585247']
    this.$nextTick(() => {
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: '10%',
          top: 'center',
          itemGap: 10,
          selectedMode: true,
          itemWidth: 5,
          itemHeight: 5,
          icon: 'circle',
          data: ['南京a', '南京b', '南京c', '南京d', '南京e'],
          textStyle: {
            color: '#77899c',
            rich: {
              uname: {
                width: 100
              },
              unum: {
                color: '#4ed139',
                width: 10,
                align: 'right'
              }
            }
          },
          formatter (name) {
            return `{uname|${name}}`
          }
        },
        color: colorList,
        series: [
          {
            name: '姓名',
            type: 'pie',
            radius: [0, 60],
            center: ['70%', '50%'],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              { name: '南京a', value: 100 },
              { name: '南京b', value: 100 },
              { name: '南京c', value: 100 },
              { name: '南京d', value: 100 },
              { name: '南京e', value: 100 }
            ]
          }
        ]
      }
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
